<template>
	<view class="order-evaluate">
		<u-loading-page :loading="loading"></u-loading-page>
		<view class="e-title">请对本次服务进行评价</view>
		<u--form v-if="!loading" labelPosition="left" :model="formData" :rules="rules" ref="uForm">
			<u-form-item :label="item.category" labelWidth='auto' :prop="item.model" :ref="item.model"
				@click=" inputCilck(index)" v-for='item, index in categoryList' :key='index'>
				<u--input v-model="formData[item.model]" border="none" inputAlign='right' :disabled='true'
					fontSize='14px'></u--input>
				<!-- <u-icon name="arrow-right" v-if='type !== "onlyRead"'></u-icon> -->
				<uni-icons slot="right" type="bottom" size="16"></uni-icons>

			</u-form-item>
			<view class="item-title">备注</view>
			<u-form-item v-if="!loading" label=" " labelWidth='0'>
				<u--textarea v-model="formData.remark" placeholder="请输入内容" border='none' :disabled='type == "onlyRead"'
					confirmType='done' fontSize='14px'></u--textarea>
			</u-form-item>
		</u--form>
		<u-picker :show="showPicker" :columns="pickerColumns" confirmColor='#EA5404' @cancel='cancel' @confirm="confirm"
			@change="changeHandler" keyName="explain"></u-picker>
		<view v-if='(type !== "onlyRead") && !loading' class='bottom-btn' @click='cancleEaluate()'>提交</view>
	</view>

</template>

<script>
	const app = getApp()
	const util = require('@utils/util.js')
	const network = require('@manager/network-manager.js')
	const dialog = require('@utils/dialog.js')
	export default {
		data() {
			return {
				loading: true,
				formData: {
					category1: null,
					category2: null,
					category3: null,
					category4: null,
					context1: null,
					context2: null,
					context3: null,
					context4: null,
					remark: null,
				},
				rules: {
					context1: [{
						required: true,
						message: '评价不能为空',
						trigger: ['blur', 'change']
					}],
					context2: [{
						required: true,
						message: '评价不能为空',
						trigger: ['blur', 'change']
					}],
					context3: [{
						required: true,
						message: '评价不能为空',
						trigger: ['blur', 'change']
					}],
					context4: [{
						required: true,
						message: '评价不能为空',
						trigger: ['blur', 'change']
					}],
					// remark: [{
					// 	required: true,
					// 	message: '备注不能为空',
					// 	trigger: ['blur', 'change']
					// }],
				},
				showPicker: false,
				pickerColumns: [],
				categoryList: [],
				currentIndex: null,
				orderId: null,
				listType: null, // 0预约试驾 1车辆交付 2保养预约 3维修预约
				orderType: null, // test order
				type: null, // create edit onlyRead
				urlList: {
					test: 'URL_TESTDRIVE_INSERTEVALUTE',
					order: 'URL_CATEGORY_INSERTEVALUTE',
					maintain:'URL_PRODUCT_AFTERSALES_INSERTEVALUATE',
					repair:'URL_PRODUCT_AFTERSALES_INSERTEVALUATE'
				},
				detailUrlList: {
					test: 'URL_TESTDRIVE_GETEVALUATEINFO',
					order: 'URL_CATEGORY_GETEVALUATEINFO'
				}
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.orderId = options.id
			this.type = options.type
			this.listType = options.listType
			this.orderType = options.orderType
			this.getCategoryList(this.listType)

		},
		onShow: function() {

		},
		methods: {

			getDetail() {
				let url = app.globalData.config.interfaces[this.detailUrlList[this.orderType]]
				let params = {
					orderId: this.orderId
				}
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						this.formData = Object.assign(this.formData, res.data)
					}
				})
			},

			getCategoryList(type) {
				let url = app.globalData.config.interfaces.URL_GET_CATEGORY_LIST
				let params = {
					type: type
				}
				let _this = this
				network.get(url, params, 'form').then(res => {
					if (res.code == 200) {
						res.data.map((item, index) => {
							_this.formData['category' + (index + 1)] = item.category, item.model =
								'context' + (index + 1)
						})
						this.categoryList = res.data
						if (this.type == 'onlyRead') {
							this.getDetail()
						}
					}
					this.loading = false
				}).catch(error => {
					this.loading = false
				})
			},

			getPickerList(index) {
				let list = []
				this.pickerColumns = []
				this.currentIndex = index
				// list.push(this.categoryList[index]['fifthExplain'])
				// list.push(this.categoryList[index]['fourthExplain'])
				// list.push(this.categoryList[index]['thirdExplain'])
				// list.push(this.categoryList[index]['secondExplain'])
				// list.push(this.categoryList[index]['firstExplain'])


				list.push({
					explain: this.categoryList[index]['fifthExplain'],
					score: this.categoryList[index]['fifthScore']
				})
				list.push({
					explain: this.categoryList[index]['fourthExplain'],
					score: this.categoryList[index]['fourthScore']
				})
				list.push({
					explain: this.categoryList[index]['thirdExplain'],
					score: this.categoryList[index]['thirdScore']
				})
				list.push({
					explain: this.categoryList[index]['secondExplain'],
					score: this.categoryList[index]['secondScore']
				})
				list.push({
					explain: this.categoryList[index]['firstExplain'],
					score: this.categoryList[index]['firstScore']
				})






				this.pickerColumns = [list]
			},

			inputCilck(index) {
				if (this.type == 'onlyRead') return
				this.showPicker = true
				this.getPickerList(index)
			},

			cancel() {
				this.showPicker = false
			},

			confirm(e) {
				console.log('confirm', e)
				this.formData['context' + (this.currentIndex + 1)] = e.value[0].explain
				this.formData['score' + (this.currentIndex + 1)] = e.value[0].score
				console.log('this.formData', this.formData)
				this.cancel()
			},

			changeHandler(e) {
				console.log('changeHandler', e)
			},
			
			 

			cancleEaluate() {
				var that = this
				uni.showLoading({
					title: '正在提交中'
				});
				this.$refs.uForm.validate().then(res => {
					console.log('formData', this.formData)
					let url = app.globalData.config.interfaces[this.urlList[this.orderType]]
					
					var categorySencenType=''
					if(this.orderType == 'test'){
						categorySencenType = '试驾订单'
					}else if(this.orderType == 'order'){
						categorySencenType = '整车订单'
					}else if(this.orderType == 'maintain'){
						categorySencenType = '保养订单'
					}else if(this.orderType == 'repair'){
						categorySencenType = '维修订单'
					}
					
					
					let params = {
						...this.formData,
						// categorySencenType: this.orderType == 'test' ? '试驾订单' : '整车订单',
						categorySencenType: categorySencenType,
						orderId: this.orderId
					}

					network.post(url, params, 'json').then(res => {
							if (res.code == 200) {
								uni.hideLoading()
								try{
									var prePage = that.$util.prePage()
									prePage.orderEvaluateSuccess(that.orderId);
								}catch(e){
									//TODO handle the exception
								}
								setTimeout(() => {
									uni.showToast({
										title: '评价成功！',
										duration: 2000,
										icon: 'success'
									})
								}, 500);
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.message,
									duration: 2000,
									icon: 'error'
								})
								
							}
						})

						// .catch(err => {
						// 	uni.hideLoading()
						// 	uni.showToast({
						// 		title: '系统异常11',
						// 		duration: 2000,
						// 		icon: 'error'
						// 	})
						// });
				}).catch(error => {
					uni.hideLoading()
				})


			},

		},
	}
</script>

<style lang='scss' scoped>
	page {
		background: #EDEDED url('https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my/bg-img.jpg') no-repeat;
		background-position: 0 0;
		background-size: 100%;
		background-attachment: fixed;
	}

	.order-evaluate .bottom-btn {
		position: fixed;
		width: 90%;
		bottom: 40rpx;
		left: 5%;
		text-align: center;
		color: #fff;
		background-color: #EA5404;
		line-height: 68rpx;
	}

	.order-evaluate {
		width: 100vw;
		box-sizing: border-box;
		padding: 40rpx 32rpx 0 48rpx;
		color: #3D3A3A;

		.e-title {
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}

		.item-title {
			margin-top: 20rpx;
		}

		/deep/.u-form-item__body__left__content__label,
		.item-title {
			font-size: 28rpx;
			line-height: 40rpx;
			color: #ADB0AE;
		}

		/deep/.u-textarea {
			background-color: rgba(0, 0, 0, 0);
			border: 2rpx solid #ddd;
			font-size: 28rpx;
		}

		/deep/.u-input {
			background-color: rgba(0, 0, 0, 0) !important;
		}

	}
</style>
